<template>
  <div id="table">
    <div id="top">
      <p>成员管理</p>
      <div>
        <el-button type="primary" plain @click="add">添加</el-button>
        <el-button type="info" plain>批量删除</el-button>
        <el-button type="warning" round @click="refresh">刷新</el-button>
      </div>
    </div>
    <el-dialog :title="tit" :visible.sync="addVisible" width="50%" top="1vh" :before-close="handleClose">
      <el-form label-width="80px" :model="from">
        <el-form-item label="成员账号" :required="true">
          <el-input v-model="from.username" :maxlength="10" placeholder="此为登录时使用的账号"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :required="true">
          <el-input v-model="from.name" :maxlength="10" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :required="true">
          <el-input v-model="from.phone" :maxlength="11" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :required="true" type="email">
          <el-input v-model="from.email" :maxlength="20" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="角色" :required="true">
          <el-select v-model="from.roleid" placeholder="请选择">
            <el-option v-for="item in roleData" :key="item.id" :value="item.id" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录密码" :required="true">
          <el-input v-model="from.passwords" :maxlength="50" resize="none" placeholder="不少于6位，数字、字母或下划线" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :required="true">
          <el-input v-model="from.passwordssure" :maxlength="50" resize="none" placeholder="不少于6位，数字、字母或下划线" type="password"></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input type="textarea" v-model="from.function" :rows="3" :maxlength="200" resize="none"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="changeAdm">确 定</el-button>
      </span>
    </el-dialog>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :border="true">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="username" label="成员账号" width="120">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="150">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="220">
      </el-table-column>
      <el-table-column prop="rolename" label="角色" width="100">
      </el-table-column>
      <el-table-column prop="logintime" label="最近登录时间" width="250">
      </el-table-column>
      <el-table-column prop="enable" label="是否启用" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" @change="changeEnable(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="delSure(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="page">
      <el-pagination background layout="prev, pager, next" :total="allData.length" :page-size="eachNum" :current-page.sync="nowPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import apicle from '../../utils/api';

export default ({
  data() {
    return {
      roleData: [],
      allData: [],
      nowPage: 1,
      eachNum: 8,
      addVisible: false,
      from: {},
      tit: ''
    };
  },
  mounted() {
    this.getAllAdm();
  },
  computed: {
    tableData() {
      return this.allData.slice((this.nowPage - 1) * this.eachNum, this.nowPage * this.eachNum);
    }
  },
  methods: {
    getAllRole() {
      apicle.getallrole().then((res) => {
        this.roleData = [];
        res.data.data.filter((item) => {
          let n = { id: '', name: '' };
          n.id = item.id;
          n.name = item.name;
          this.roleData.push(n);
        })
      })
    },
    getAllAdm() {
      apicle.getalladm().then((res) => {
        res.data.data.filter((v) => {
          if (v.logintime) {
            v.logintime = v.logintime.replace(/T|.000Z/g, ' ');
          };
          if (v.enable == '是') {
            v.enable = true;
          } else {
            v.enable = false;
          };
        });
        this.getAllRole()
        this.allData = res.data.data;
      })
    },
    changeEnable(val) {
      if (val.enable) {
        val.enable = '是'
      } else {
        val.enable = '否'
      }
      apicle.admEnable(val).then(() => {
        if (val.enable == '是') {
          this.$message({
            message: '启用成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '禁用成功',
            type: 'warning'
          });
        }
        this.getAllAdm();
      })
    },
    delSure(data) {
      this.$confirm('确认删除该角色？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(data);
      })
    },
    del(data) {
      this.$axios({
        url: '/jurisdiction/deladm',
        method: 'post',
        data: data
      }).then(() => {
        this.getAllAdm();
      })
    },
    handleClose() {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          if (action == 'cancel') {
            this.addVisible = true;
          } else if (action == 'confirm') {
            this.addVisible = false;
            this.from = {};
          }
        }
      })
    },
    changeAdm() {
      console.log(this.from)
      if (this.from.type == 'add') {
        this.addAdm();
        console.log('add')
      } else {
        this.editAdm();
      }
    },
    add() {
      this.tit = '添加成员';
      this.addVisible = true;
      this.from.type = 'add';
    },
    addAdm() {
      if (this.from.username == '' || this.from.name == '' || this.from.phone == '' || this.from.email == '' || this.from.roleid == '' || this.from.passwords == '' || this.from.passwordssure == '') {
        this.$message({
          message: '有必填项未填写',
          type: 'error'
        });
      } else {
        if (this.from.passwords != this.from.passwordssure) {
          this.$message({
            message: '密码与确认密码不相同',
            type: 'error'
          });
        } else {
          this.addVisible = false;
          this.$axios({
            url: '/jurisdiction/addAdm',
            method: 'post',
            data: this.from
          }).then(() => {
            this.getAllAdm();
            this.from = {};
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          })
        }
      }
    },
    edit(data) {
      this.tit = '修改成员';
      this.addVisible = true;
      this.from = { ...data }
      //this.from = data;
      this.from.type = 'edit';
    },
    editAdm() {
      this.addVisible = false;
      this.$axios({
        url: '/jurisdiction/editAdm',
        method: 'post',
        data: this.from
      }).then(() => {
        this.getAllAdm();
        this.from = {};
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      })
    },
    refresh() {
      this.getAllRole();
      this.$message({
        message: '已刷新',
        type: 'success'
      });
    }
  }
})
</script>

<style lang="less" scoped>
#topTitle {
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  background-color: rgb(242, 242, 242);
  h3 {
    float: left;
    width: 100px;
  }
  .el-button {
    float: right;
  }
}
#top {
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
  p {
    float: left;
  }
  div {
    float: right;
  }
}
#table {
  overflow-y: hidden;
  .el-table {
    min-height: 505px;
  }
}
/deep/ .cell {
  text-align: center;
}
#page {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}

/deep/ .el-dialog__body {
  padding: 30px 150px;
}
</style>
